<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <el-input class="search-input" v-model="form.keyword" @keyup.enter.native="searchData" placeholder="请输入要检索的表单名称"></el-input>
        <el-radio-group class="tableType-btn" v-model="tableType" @change="checkTableType">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="other">待处理上报<span class="num">{{ waitNumber }}</span></el-radio-button>
        </el-radio-group>
        <el-table
            v-show="tableData.length"
            class="pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            :data="tableData"
            style="width: 100%">
            <el-table-column
                label="序号"
                align="center"
                type="index"
                width="60">
            </el-table-column>
            <el-table-column
                prop="name"
                label="表单名称">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="待处理上报">
            </el-table-column>
            <el-table-column
                prop="departmentName"
                label="已处理上报">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="detailRow(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <ask-empty-text
            style="min-height: 400px;"
            v-if="tableData.length === 0">
        </ask-empty-text>
        <template v-slot:footer v-if="total > 0">
            <pagination :total="total" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getTable"/>
        </template>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DeclareListTown extends Vue {
    total = 0
    pageIndex = 1
    pageSize = 10
    tableData = []
    form = {
        keyword: ""
    }

    // 待上报数量
    waitNumber = 122
    tableType = "all"

    // 获取表格数据
    getTable() {
        console.log(1);
    }

    detailRow(row: any) {
        console.log(row);
    }

    checkTableType() {
        this.getTable();
    }

    searchData() {
        console.log(this.form.keyword);
    }
}
</script>

<style lang="scss" scoped>
.search-input {
    margin: 5px 20px;
}
.tableType-btn {
    margin: 0 20px;
    .num {
        color: #f00;
        margin-left: 4px;
        font-size: 14px;
        font-weight: bold;
    }
}
</style>
